<script>

    const data = {
        keyOptions: [
            {
                value: 'HTML',
                label: 'HTML'
            },
            {
                value: 'CSS',
                label: 'CSS'
            },
            {
                value: 'JavaScript',
                label: 'JavaScript'
            }
        ],
        rules: {
            title: [
                {
                    required: true,
                    message: '请输入课程名称',
                    trigger: 'blur'
                },
                {
                    min: 0,
                    max: 20,
                    message: '标题不能超过20个字符',
                    trigger: 'blur'
                }
            ],
            introduce: [
                {
                    required: true,
                    message: '请填写课程描述',
                    trigger: 'blur'
                }
            ]
        }
    };

    export default {
        data() {
            data.ruleForm = {
                title: '',      // 课程标题
                keys: '',       // 关键词列表
                introduce: '',  // 课程介绍
                chapterNum: 1,  // 章节数目
                classes: [{     // 课时数组
                    number : 1,
                    list : ['']
                }]
            };
            return data;
        },
        methods: {
            // 章节数改变
            onChapterNumChange(num){
                if(num > data.ruleForm.classes.length){
                    for(let i=data.ruleForm.classes.length; i<num; i++)
                        data.ruleForm.classes[i] = {
                            number : 1,
                            list : ['']
                        };
                } else {
                    data.ruleForm.classes.length = num;
                }
            },
            // 课时数改变
            onClassesNumChange(old, current,temp){
                console.log(old);
                console.log(current);
                console.log(temp);
            }
        }
    }
</script>

<template>
    <div class="content-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="课程名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="关键字" prop="keys">
                <el-select
                        style="width: 500px;"
                        v-model="ruleForm.keys"
                        multiple
                        filterable
                        allow-create
                        placeholder="请选择课程标签">
                    <el-option
                            v-for="item in keyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课程介绍" prop="introduce">
                <el-input
                        type="textarea"
                        resize="none"
                        rows="4"
                        v-model="ruleForm.introduce">
                </el-input>
            </el-form-item>
            <el-form-item label="封面图片">
                <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" src="">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="章节数" prop="introduce">
                <el-input-number
                        v-model="ruleForm.chapterNum"
                        @change="onChapterNumChange"
                        :min="1"
                        :max="50">
                </el-input-number>
            </el-form-item>
            <el-form-item label="课程大纲">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item, index) in ruleForm.classes">
                        <template slot="title">
                            <span class="chapter-title">第 {{ index+1 }} 章</span>
                            <span class="chapter-classes-title">课时</span>
                            <el-input-number
                                    v-model="item.number"
                                    size="small"
                                    class="chapter-classes-num"
                                    @change="onClassesNumChange"
                                    :min="1"
                                    :max="50">
                            </el-input-number>
                        </template>
                        <el-row v-for="i in item.number" class="chapter-classes-sub">
                            <el-col :span="4" >
                                <i class="el-icon-caret-right"></i>
                                <span>第 {{ i }} 课时</span>
                            </el-col>
                            <el-col :span="19">
                                <el-input
                                        size="small"
                                        placeholder="请输入课时内容标题">
                                </el-input>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
    .content-box {
        padding: 30px 50px;
    }
    .content-box .chapter-classes-num{
        display: block;
        float: right;
        margin-top: 7px;
        margin-right: 5px;
    }
    .content-box .chapter-classes-title{
        display: block;
        float: right;
        margin-right: 17px;
    }
    .content-box .chapter-classes-sub:first-child{
        margin-top: 0;
    }
    .content-box .chapter-classes-sub:last-child{
        margin-bottom: 0;
    }
    .content-box .chapter-classes-sub{
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 20px;
    }
    .content-box .chapter-classes-sub span{
        line-height: 30px;
    }
    .avatar-uploader{
        display: inline-block;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
    }
    .avatar-uploader:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>